<template>
    <div>
        <!-- 导航组件 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <!-- <el-breadcrumb-item>
          <a href="#/home">首页</a>
        </el-breadcrumb-item>-->
            <el-breadcrumb-item>权限管理</el-breadcrumb-item>
            <el-breadcrumb-item>角色权限</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 卡片视图 -->
        <el-card class="box-card">
            <!-- layout 布局 -->
            <el-row :gutter="20">
                <el-col :span="6">
                    <div class="grid-content bg-purple">
                        <el-button type="primary" icon="el-icon-circle-plus-outline" @click="addUserInfoVisible=true">
                            添加角色
                        </el-button>
                    </div>
                </el-col>
            </el-row>
        </el-card>
        <!-- 表格展示区 -->
        <el-table :data="roleList" border stripe>
            <!-- 展开列  -->
            <el-table-column type="expand">
                <template slot-scope="scope">
                    <!-- <pre>{{ scope.row }}</pre> -->

                    <!--每一行包含多级权限 渲染一集权限 每个children是一集权限 数组 使用layout布局-->
                    <el-row v-for="(item1, index1) in scope.row.children"
                        :class="['bdbottom', index1===0?'bdtop':'', 'alcenter']" :key="item1.id">
                        <!-- 第一列是一级权限 -->
                        <el-col :span="5">
                            <!-- 用tag标签显示 -->
                            <el-tag closable @close="removeRightId(scope.row, item1.id)">{{ item1.authName }}</el-tag>
                            <i class="el-icon-caret-right"></i>
                        </el-col>
                        <!-- 第二列是二级三级权限 -->
                        <el-col :span="19">
                            <!-- 渲染二级菜单 -->
                            <el-row v-for="(item2, index2) in item1.children"
                                :class="[index2===0?'':'bdtop', 'alcenter']" :key="item2.id">
                                <el-col :span="6">
                                    <!-- 用tag标签显示 -->
                                    <el-tag type="success" closable @close="removeRightId(scope.row, item2.id)">
                                        {{ item2.authName }}</el-tag>
                                    <i class="el-icon-caret-right"></i>
                                </el-col>
                                <!-- 因为二级菜单 的children包含 三级菜单所以 在el-col中显示循环3级菜单 -->
                                <el-col :span="18">
                                    <!-- 三级菜单 渲染tag标签 -->
                                    <el-tag type="warning" v-for="(item3, index3) in item2.children" :key="item2.id"
                                        closable @click="clickRightThirdTag"
                                        @close="removeRightId(scope.row, item3.id)">
                                        {{ item2.authName }}</el-tag>
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                    <!-- <pre>{{ scope.row }}</pre> -->
                </template>
            </el-table-column>
            <!-- 索引列 -->
            <el-table-column type="index"></el-table-column>
            <!-- 表格列 -->
            <el-table-column prop="roleName" label="角色名称"></el-table-column>
            <el-table-column prop="roleDesc" label="角色描述"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" icon="el-icon-edit">编辑</el-button>
                    <el-button type="danger" size="mini" icon="el-icon-delete">删除</el-button>
                    <el-button type="warning" size="mini" icon="el-icon-setting" @click="settingUserRightBtn(scope.row)">设置权限
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 新增用户信息dialog弹框 -->
        <el-dialog title="新增用户信息" :visible.sync="addUserInfoVisible" @close="closeAddUserDialog" width="50%">
            <!-- 弹窗主体内容区域 -->
            <!-- <el-form ref="editUserInfoRef" :model="getEditFormItemObj" :rules="editUserInfoRules" label-width="70px">
            <el-form-item label="用户名">
              <el-input v-model="getEditFormItemObj.username" disabled></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="getEditFormItemObj.email"></el-input>
            </el-form-item>
            <el-form-item label="手机" prop="mobile">
              <el-input v-model="getEditFormItemObj.mobile"></el-input>
            </el-form-item>
          </el-form> -->
            <!-- 弹窗底部区域 -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="addUserInfoVisible = false">取 消</el-button>
                <el-button type="primary" @click="addUserInfoVisible = false">确 定</el-button>
            </span>
        </el-dialog>


        <!-- 分配用户权限dialog弹框 -->
        <el-dialog title="设置用户权限" :visible.sync="rightDialogVisible" @close="closeUserRightsDialog" width="50%">
            <!-- 弹窗主体内容区域 -->
            <!-- <el-form ref="editUserInfoRef" :model="getEditFormItemObj" :rules="editUserInfoRules" label-width="70px">
            <el-form-item label="用户名">
              <el-input v-model="getEditFormItemObj.username" disabled></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="getEditFormItemObj.email"></el-input>
            </el-form-item>
            <el-form-item label="手机" prop="mobile">
              <el-input v-model="getEditFormItemObj.mobile"></el-input>
            </el-form-item>
          </el-form> -->

            <!-- 分配用户权限树状图  treeProps 以什么树形嵌套  data: 数据源 node-key="id"选中时就是选中id default-expand-all默认展开所有节点-->
            <el-tree :data="rightsListArr" ref="treeRef" :props="treeProps" show-checkbox node-key="id" default-expand-all check-on-click-nod
            :default-checked-keys="defTreeSelKeyArr"></el-tree>
            <!-- 弹窗底部区域 -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="rightDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="allotRights">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        // 组件名称
        name: 'Roles',
        // 组件参数 接收来自父组件的数据
        props: {},
        // 局部注册的组件
        components: {},
        // 组件状态值
        data() {
            return {
                // 权限列表数据
                roleList: [
                    {
                        "id": 36,  //角色id
                        "roleName": "主管",
                        "roleDesc": "技术负责人",
                        "children": [
                            {
                                "id": 101,  //权限id
                                "authName": "商品管理",
                                "path": null,
                                "children": [
                                    {
                                        "id": 104,   //权限id
                                        "authName": "商品列表",
                                        "path": null,
                                        "children": [
                                            {
                                                "id": 105,   //权限id
                                                "authName": "添加商品",
                                                "path": null,
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    },

                    {
                        "id": 35,
                        "roleName": "测试角色",
                        "roleDesc": "测试角色描述",
                        "children": [
                            {
                                "id": 101,
                                "authName": "商品管理",
                                "path": null,
                                "children": [
                                    {
                                        "id": 104,
                                        "authName": "商品列表",
                                        "path": null,
                                        "children": [
                                            {
                                                "id": 105,
                                                "authName": "添加商品",
                                                "path": null,
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    },

                    {
                        "id": 34,
                        "roleName": "部门负责人",
                        "roleDesc": "部门管理",
                        "children": [
                            {
                                "id": 101,
                                "authName": "商品管理",
                                "path": null,
                                "children": [
                                    {
                                        "id": 104,
                                        "authName": "商品列表",
                                        "path": null,
                                        "children": [
                                            {
                                                "id": 105,
                                                "authName": "添加商品",
                                                "path": null,
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    }
                ],
                //用户权限列表
                rightsListArr: [
                    {
                        "id": 33,  //角色id
                        "roleName": "主管",
                        "roleDesc": "技术负责人",
                        "authName": "权限一",
                        "children": [
                            {
                                "id": 101,  //权限id
                                "authName": "商品管理",
                                "path": null,
                                "children": [
                                    {
                                        "id": 104,   //权限id
                                        "authName": "商品列表",
                                        "path": null,
                                        "children": [
                                            {
                                                "id": 105,   //权限id
                                                "authName": "添加商品",
                                                "path": null,
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    },

                    {
                        "id": 32,
                        "roleName": "测试角色",
                        "roleDesc": "测试角色描述",
                        "authName": "权限二",
                        "children": [
                            {
                                "id": 101,
                                "authName": "商品管理",
                                "path": null,
                                "children": [
                                    {
                                        "id": 104,
                                        "authName": "商品列表",
                                        "path": null,
                                        "children": [
                                            {
                                                "id": 105,
                                                "authName": "添加商品",
                                                "path": null,
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    },

                    {
                        "id": 31,
                        "roleName": "部门负责人",
                        "roleDesc": "部门管理",
                        "authName": "权限三",
                        "children": [
                            {
                                "id": 101,
                                "authName": "商品管理",
                                "path": null,
                                "children": [
                                    {
                                        "id": 104,
                                        "authName": "商品列表",
                                        "path": null,
                                        "children": [
                                            {
                                                "id": 105,
                                                "authName": "添加商品",
                                                "path": null,
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    }
                ],
                //树形控件的默认参数显示 设置
                treeProps:{
                    label: 'authName',
                    children: 'children'
                },
                //树形控件 默认选中的id数组 对应id即可选中 循环便利数组 把第三级id筛选到该数组
                defTreeSelKeyArr: [104,105],
                //当前即将分配权限的id 在设置弹款时保存
                currentRoleId: '',
                //设置显示分配角色弹框显示隐藏的
                rightDialogVisible: false,
                // 显示新增角色的字段
                addUserInfoVisible: false
            }
        },
        // 计算属性
        computed: {},
        // 侦听器
        watch: {},
        // 组件方法
        methods: {
            //获取角色列表数据
            async getRolesList() {
                //    const { data:res } = await this.$http.get();
                // 自定义数据---------------------------------------------
                var res = {
                    "data": [
                        {
                            "id": 1,
                            "roleName": "主管",
                            "roleDesc": "技术负责人",
                            "children": [
                                {
                                    "id": 2,
                                    "authName": "商品管理",
                                    "path": null,
                                    "children": [
                                        {
                                            "id": 104,
                                            "authName": "商品列表",
                                            "path": null,
                                            "children": [
                                                {
                                                    "id": 105,
                                                    "authName": "添加商品",
                                                    "path": null,
                                                }
                                            ]
                                        }
                                    ]
                                }
                            ]
                        }
                    ],
                    "meta": {
                        "msg": "获取成功",
                        "status": 200
                    }
                }
                // 自定义假数据---------------------------------------------

                if (res.meta.status !== 200) return this.$message.error("角色列表获取失败！");

                this.roleList = res.data;

                console.log(this.roleList);
            },
            // 新增角色dialog弹框的关闭事件
            closeAddUserDialog() {
                // 重置 表单信息------------------
                console.log("关闭了弹窗");
            },
            // 点击3级权限的tag 事件
            clickRightThirdTag() {
                console.log('点击3级权限的tag');
            },
            // 分配用户权限弹框的关闭事件
            closeUserRightsDialog() {
                console.log("分配用户权限弹框关闭事件")

                //每次关闭 需要清空选中的权限id 
                // this.defTreeSelKeyArr();
            },
            //点击3级权限的tag的id移除3级权限 删除 需要对应的角色 id  权限id
            async removeRightId(role, rightId) {
                //提示用户是否确认删除
                const confirmRes = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).catch(err => err)

                if (confirmRes !== 'confirm') return this.$message.info("取消了删除！")

                //确认删除   删除 需要对应的角色 id  权限id
                const { data: res } = await this.$http.delete(`roles/${role.id}/rights/${rightId}`);
                if (res.meta.status !== 200) return this.$message.error("删除失败！")

                //删除成功
                this.$message.success("删除成功！")
                //重新获取角色权限数据 不建议重新调用 会导致页面刷新 会关闭下拉 
                //this.getRolesList()

                //只需要重置 当前权限数据即可
                role.children = res.data;
            },
            //获取id 获取角色的权限列表 树状图  分配用户权限按钮点击事件
            settingUserRightBtn(role) {
                //保存当前设置角色的id
                //this.currentRoleId = role.id

                // const { data: res } = await this.$http.get('rights/' + id);

                // // 判断状态
                // if (res.meta.status !== 200) return this.$message.error("列表获取失败！")

                // //列表获取成功 赋值data属性
                // const rightsListArr = res.data

                //通过递归获取第三节点选中的id
               // getLeafKey(this.getLeafKey(role, this.defTreeSelKeyArr))

                this.rightDialogVisible = true
            },
            /**
             * 通过递归的形式获取子节点的id 在点击设置权限显示弹框之前
             * param node 当前节点
             * param arr 当前节点id保存的数组
            */
            getLeafKey(node, arr){
               //判断当前节点是否有children树形 没有说明不是第三节点
               if(!node.children){
                   //把第三节点 选中的id 放到树节点的默认选中数组
                   return arr.push(node.id)
               }
               //不是第三节点 继续循环找第三节点
               node.children.forEach(item=>{
                   this.getLeafKey(item, arr)
               })
            },
            //确认分配权限弹框 提交
           async allotRights(){
                //使用tree的引用调用tree组件的方法获取半选中/全选中的key 
                const keys = [
                    ...this.$refs.treeRef.getCheckedKeys(),
                    //半选中的id
                    ...this.$refs.treeRef.getHalfCheckedKeys()
                ]

                const idStr = keys.join();
 
              const { data:res } = await this.$http(`roles/${this.currentRoleId}/rights`,{rids:idStr})

              if(res.meta.status!==200) return this.$message.error("权限设置失败！")

              this.$message.error("权限设置成功！")
              //重新获取列表数据
               // this.getRolesList()

              this.rightDialogVisible=false;
            }
        },
        // 以下是生命周期钩子   注：没用到的钩子请自行删除
        /**
        * 在实例初始化之后，组件属性计算之前，如data属性等
        */
        beforeCreate() {
        },
        /**
        * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
        */
        created() {
            // 调用获取角色列表数据
            // this.getRolesList()
        },
        /**
        * 在挂载开始之前被调用：相关的 render 函数首次被调用。
        */
        beforeMount() {
        },
        /**
        * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
        * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
        */
        mounted() {
        },
        /**
        * 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
        * 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
        */
        beforeUpdate() {
        },
        /**
        * 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
        * 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
        */
        updated() {
        },
        /**
        * keep-alive 组件激活时调用。 仅针对keep-alive 组件有效
        */
        activated() {
        },
        /**
        * keep-alive 组件停用时调用。 仅针对keep-alive 组件有效
        */
        deactivated() {
        },
        /**
        * 实例销毁之前调用。在这一步，实例仍然完全可用。
        */
        beforeDestroy() {
        },
        /**
        * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
        * 所有的事件监听器会被移除，所有的子实例也会被销毁。
        */
        destroyed() {
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style scoped>
    .bdtop {
        border-top: 1px solid #eee;
    }

    .bdbottom {
        border-bottom: 1px solid #eee;
    }

    .el-tag {
        margin: 10px 0;
    }

    .alcenter {
        display: flex;
        align-items: center;
    }
</style>